<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="BI system demo">
    <meta name="author" content="Louis">
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_937125_521jakjikg3.css" />
    <link rel="stylesheet" type="text/css" href="three/animate.css" />
    <link rel="stylesheet" type="text/css" href="index.css" />
    <!-- <link rel="stylesheet" href="https://cdn.bootcss.com/fullPage.js/3.0.3/fullpage.css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/fullPage.js/3.0.3/fullpage.min.js"></script>
    <script src="http://81hu.com/fullpage/jquery.easing.min.js"></script> -->
    <!-- <script src="https://cdn.bootcss.com/fullPage.js/3.0.3/vendors/easings.min.js"></script>  错得-->
    <!-- <script src="http://81hu.com/fullpage/jquery.easing.min.js"></script> -->
    <link rel="stylesheet" type="text/css" href="three/fullpage.min.css" />
    <script type="text/javascript" src="three/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="three/fullpage.min.js"></script>
    <script type="text/javascript" src="three/easings.min.js"></script>
    <script type="text/javascript" src="http://img.foshanplus.com/js/echarts.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="http://img.foshanplus.com/js/wordcloud2.js"></script>
    <script type="text/javascript" src="gdp.js"></script>
    <title>数据可视化demon</title>
    <style>
        .section { text-align: center; font: 50px "Microsoft Yahei"; color: #fff;}
         #chart1 {
            width: 100%;
            height: 100%;
        }
        #chart2 {
            width: 800px;
            height: 600px;
        }

        #chart3 {
            width: 100%;
            height: 100%;
        }
        #chart4 {
            width: 90%;
            height: 90%;
        }
    </style>
</head>

<body>
    <div id="dowebok">
<!--             <div class="section section6">
                <div class="section6-bg">
                    <div class="section6-detail">
                        <p>推动传统媒体和新兴媒体融合发展，<br />
                            要遵循新闻传播规律和新兴媒体发展规<br />
                            律，强化互联网思维，坚持传统媒体和<br />
                            新兴媒体优势互补、一体发展，坚持先<br />
                            进技术为支撑、内容建设为根本，推动<br />
                            传统媒体和新兴媒体在内容、渠道、平<br />
                            台、经营、管理等方面的深度融合，着<br />
                            力打造一批形态多样、手段先进、具有<br />
                            竞争力的新型主流媒体，建成几家拥有<br />
                            强大实力和传播力、公信力、影响力的<br />
                            新型媒体集团，形成立体多样、融合发<br />
                            展的现代传播体系。要一手抓融合，一<br />
                            手抓管理，确保融合发展沿着正确方向<br />
                            推进。
                        </p>
                        <p style="text-align: right;">——在中央全面深化改革领导<br />
                            小组第四次会议上的讲话
                        </p>
                    </div>
                </div>
                <div class='selector section6-right'>
                    <ul>
                        <li><img src="img/section6-3.png"/></li>
                    </ul>
                </div>
            </div> -->
        <div class="section section2">
            <div class="section-bg-out">
                <div class="section-bg">
                    <h1>第一页</h1>
                    <div id="chart1"></div>
<!--                     <h2>党建引领<br/>融创转型</h2>
                    <ul class="section2-list1">
                        <li style="color: #e4b13d;background: #e4b13d;"><i class="iconfont icon-icon2"></i>
                            <p>党建+<br />传播服务链</p>
                        </li>
                        <li style="color: #db724f;background: #db724f;top: 4rem;"><i class="iconfont icon-icon"></i>
                            <p>党建+<br />数据服务链</p>
                        </li>
                        <li style="color: #da9363;background: #da9363;top: 6rem;"><i class="iconfont icon-ziyuan7"></i>
                            <p>党建+<br />内容服务链</p>
                        </li>
                        <li style="color: #ae7956;background: #ae7956;top: 4rem;"><i class="iconfont icon-ziyuan8"></i>
                            <p>党建+<br />活动服务链</p>
                        </li>
                        <li style="color: #845741;background: #845741;"><i class="iconfont icon-icon1"></i>
                            <p>党建+<br />培训服务链</p>
                        </li>
                    </ul> -->
                    <ul class="section2-list2">
                        <li>
                            <p>说明一</p>
                        </li>
                        <li>
                            <p>说明二</p>
                        </li>
                        <li>
                            <p>说明三</p>
                        </li>
                        <li>
                            <p>说明四</p>
                        </li>
                        <li>
                            <p>说明五</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="section section3">
            <div class="section-bg-out">
                <div class="section-bg">
                    
                    <h1>第二页</h1>
                    <h3 class="section3-left-title">数据汇流</h3>
                    <h3 class="section3-right-title">智库支撑</h3>
                    <ul class="section3-left-list">
                        <li style="margin-left: 0rem;"><i class="section3-icon"></i><i class="iconfont icon-ziyuan6"></i>
                            <p>全域全网采集</p>
                        </li>
                        <li style="margin-left: 4rem;"><i class="section3-icon"></i><i class="iconfont icon-ziyuan5"></i>
                            <p>高效分析挖掘</p>
                        </li>
                        <li style="margin-left: 8rem;"><i class="section3-icon"></i><i class="iconfont icon-ziyuan1"></i>
                            <p>智能实时共享</p>
                        </li>
                        <li style="margin-left: 12rem;"><i class="section3-icon"></i><i class="iconfont icon-ziyuan2"></i>
                            <p>决策辅助支持</p>
                        </li>
                    </ul>
                    <ul class="section3-right-list">
                        <li style="margin-right: 0rem;"><i class="section3-icon"></i><i class="iconfont icon-icon"></i>
                            <p>智库最强外脑</p>
                        </li>
                        <li style="margin-right: 4rem;"><i class="section3-icon"></i><i class="iconfont icon-ziyuan3"></i>
                            <p>提供决策参考</p>
                        </li>
                        <li style="margin-right: 8rem;"><i class="section3-icon"></i><i class="iconfont icon-ziyuan"></i>
                            <p>做好施政助手</p>
                        </li>
                        <li style="margin-right: 12rem;"><i class="section3-icon"></i><i class="iconfont icon-ziyuan4"></i>
                            <p>服务创新发展</p>
                        </li>
                    </ul>
                    <canvas id="chart2"></canvas>
                </div>
            </div>
        </div>
        <!-- <div class="section section3">
            <div class="slide">第三屏的第一屏</div>
            <div class="slide">第三屏的第二屏</div>
            <div class="slide">第三屏的第三屏</div>
        </div> -->
<!--         <div class="section section7">
            <div class="section-bg-out">
                <div class="section-bg">
                    <h1>三位一体</h1>
                    <button class="section7-back-btn" style="display: none;">返回</button>
                    <div class="section7-page1 section7-page" style="left: -28%;">
                        <h2>佛山融媒中心</h2>
                        <img class="map-img" src="img/map-1.png"/>
                        <img class="map-img" src="img/map-3.png" style="height: 84%;left: 54%;top: 14%;"/>
                        <img class="map-img" src="img/map-2.png" style="left: 63%;height: 48%;top: 18.5%;"/>
                </div>
                        <div class="section7-page2 section7-page" style="left: 0%;">
                            <ul>
                                <li>
                                    <h2>报</h2>
                                    <p class="section7-num">
                                        100万+
                                    </p>
                                    <ul class="section7-detail">
                                        <li>佛山日报</li>
                                        <li>珠江时报、珠江商报、今日禅城、今日高明、今日三水</li>
                                        <li>32镇街社区报（已有10份）</li>
                                    </ul>
                                </li>
                                <li>
                                    <h2>网</h2>
                                    <p class="section7-num">
                                        100万+
                                    </p>
                                    <ul class="section7-detail">
                                        <li>广电网络机顶盒用户</li>
                                        <li>微信、微博</li>
                                        <li>佛山在线官网</li>
                                    </ul>
                                </li>
                                <li>
                                    <h2>端</h2>
                                    <p class="section7-num">
                                        100万+
                                    </p>
                                    <ul class="section7-detail">
                                        <li>佛山+APP</li>
                                    </ul>
                                </li>
                            </ul>
                            
                            <ul class="section7-page2-list2">
                                <li>
                                    <a href="http://epaper.fsonline.com.cn/fsrb/paperindex.htm" target="_blank"></a>
                                    <iframe src="http://epaper.fsonline.com.cn/fsrb/paperindex.htm"></iframe>
                                </li>
                                <li>
                                    <a href="http://epaper.fsonline.com.cn/fsrb/paperindex.htm" target="_blank"></a>
                                    <iframe src="http://epaper.fsonline.com.cn/fsrb/paperindex.htm"></iframe>
                                </li>
                                <li>
                                    <a href="http://epaper.fsonline.com.cn/fsrb/paperindex.htm" target="_blank"></a>
                                    <iframe src="http://epaper.fsonline.com.cn/fsrb/paperindex.htm"></iframe>
                                </li>
                            </ul>
                        </div>
                        <div class="section7-page3 section7-page" style="left: 28%;">
                            <div class='selector'>
                                <ul>
                                    <li><input id='1' type='button'> <label for='1' class="fspyears" id="fspBtn10" data-target="10">文化</label></li>
                                    <li><input id='2' type='button'> <label for='2' class="fspyears" id="fspBtn00" data-target="00">政务</label></li>
                                    <li><input id='3' type='button'> <label for='3' class="fspyears" id="fspBtn90" data-target="90">健康</label></li>
                                    <li><input id='4' type='button'> <label for='4' class="fspyears" id="fspBtn80" data-target="80">产经</label></li>
                                    <li><input id='5' type='button'> <label for='5' class="fspyears" id="fspBtn70" data-target="70">美食</label></li>
                                    <li><input id='6' type='button'> <label for='6' class="fspyears" id="fspBtn60" data-target="60">社交</label></li>
                                    <li><input id='7' type='button'> <label for='7' class="fspyears" id="fspBtn50" data-target="50">教育</label></li>
                                    <li><input id='8' type='button'> <label for='8' class="fspyears" id="fspBtn40" data-target="40">服务</label></li>
                                    <li><input id='8' type='button'> <label for='8' class="fspyears plus-icon" id="fspBtn40" data-target="40">三水</label></li>
                                    <li><input id='8' type='button'> <label for='8' class="fspyears plus-icon" id="fspBtn40" data-target="40">高明</label></li>
                                    <li><input id='8' type='button'> <label for='8' class="fspyears plus-icon" id="fspBtn40" data-target="40">顺德</label></li>
                                    <li><input id='8' type='button'> <label for='8' class="fspyears plus-icon" id="fspBtn40" data-target="40">南海</label></li>
                                    <li><input id='8' type='button'> <label for='8' class="fspyears plus-icon" id="fspBtn40" data-target="40">禅城</label></li>
                                </ul>
                                <button><img src="img/section7-1.png"/></button>
                            </div>
                        </div>
                    </div>
                </div>
        </div> -->
        <div class="section section4">
            <div class="section-bg-out">
                <div class="section-bg">
                    <h1>第三页</h1>
                    
<!--                     <ul>
                        <li class="section4-li"><h3>传播力</h3>
                            <p>构建以互联网传播为主要渠道、以报纸传播为依托的新型传播格局，打造3个百万级全媒体矩阵，融合新技术、内容、渠道、机制系统性创新，大力推动融合传播力建设，提升传播广度、深度、精度。精准定位受众需求，形成全方位、多层次、多声部的主流舆论矩阵。</p>
                        </li> -->
                        <div id="chart4"></div>
<!--                         <li class="section4-li">
                            <h3>引导力</h3>
                            <p>巩固壮大主流思想，牢牢把握舆论导向。坚定“四个意识”， 把正确的舆论导向放在第一位。围绕中心工作热点现象，精于挖掘事实，善于提出概念，敢于形成标识，引导社会舆论正确走向，团结稳定鼓劲，凝聚社会合力。</p>
                        </li>
                        <li class="section4-li"><h3>影响力</h3>
                            <p>整合央媒央网资源。提高报道层次，提高选题策划水平，进而提高党委政府在主流媒体影响力。加强新闻供给侧结构性改革。以本土优质内容为地方主流媒体的核心竞争力，立足佛山，实现市、区、镇、社区、家庭五级覆盖。</p>
                        </li>
                        <li class="section4-li"><h3>公信力</h3>
                            <p>强化政媒互动，回应社会关切。坚持对党委政府负责、对人民负责，用心用情用功为时代立言。构建新型政媒舆情信息共享体系，建设媒政互动平台和舆情监测平台，树立党委政府的权威和形象，守望城市公共利益和社会公平正义，树立媒体品牌价值和公信力，打造新型权威主流媒体。</p>
                        </li>
                    </ul> -->
                </div>
            </div>
        </div>
<!--         <div class="section section5">
            <div class="section-bg-out">
                <div class="section-bg">
                    <h1>五级覆盖</h1>
                    <ul class="section5-list1">
                        <li><h3>佛山+</h3>
                            <p>市级融媒指挥中心</p>
                        </li>
                        <li><h3>五区</h3>
                            <p>禅城+ 南海+ 顺德+ 高明+ 三水+</p>
                        </li>
                        <li><h3>镇街</h3>
                            <p>祖庙 桂城 大良 荷城 西南 等32个镇街</p>
                        </li>
                        <li><h3>社区</h3>
                            <p>村居 企业 工厂 学校 科研院所 街道社区 社会组织</p>
                        </li>
                        <li><h3>家庭</h3>
                            <p>近800万常住人口 流动人口</p>
                        </li>
                    </ul>
                    <ul class="sections5-list2">
                        <li>上情下达</li>
                        <li>靶向传播</li>
                        <li>全域覆盖</li>
                    </ul>
                    <img class="section5-arrow1" src="img/section5-2.png"/>
                    <img class="section5-arrow2" src="img/section5-1.png"/>
                    <div style="position: absolute;bottom: 4rem;width: 100%;height: 50rem;max-height: 73vh;">
                        <div class="section5-right-block"></div>
                        <div class="section5-roll">
                            <img class="section5-roll-img" src="img/roll.png"/>
                        </div>
                            <i class="section5-logo iconfont icon-logo"></i>
                        </div>
                    </div>
                </div>
        </div> -->
        <div class="section section1">
            <div class="section-bg-out">
                <div class="section-bg">
                    <div id="chart3"></div>
                    <h1>第四页</h1>
                    <!-- <div class="section1-content"></div> -->
                    <ul class="section1-left-list">
                        <li><h3>数据</h3>
                            <p>采集 加工<br />分发 研判</p>
                        </li>
                        <li><h3>舆情</h3>
                            <p>守牢意识<br />形态安全</p>
                        </li>
<!--                         <li><h3>智库</h3>
                            <p>服务党委<br />服务产业</p>
                        </li> -->
                    </ul>
                    <ul class="section1-right-list">
                        <li><h3>传播</h3>
                            <p>佛山正能量<br />央媒央网</p>
                        </li>
                        <li><h3>文创</h3>
                            <p>会展经济<br />文化创意产业</p>
                        </li>
<!--                         <li><h3>视频</h3>
                            <p>直播 访谈<br />纪录片</p>
                        </li> -->
                    </ul>
                </div>
            </div>
        </div>
        </div>
            <script type="text/javascript">
            $(function() {
                //字体适配
                var docEl = document.documentElement,
                    //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，
                    //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
                    //总来的来就是监听当然窗口的变化，一旦有变化就需要重新设置根字体的值
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function() {
                        //设置根字体大小
                        let maxWidth = 750
                        // let cw = docEl.clientWidth > maxWidth ? maxWidth : docEl.clientWidth
                        let cw = docEl.clientWidth;
                        docEl.style.fontSize = cw * 0.0101604278 + 'px';
                    };
                recalc();
                //绑定浏览器缩放与加载时间
                window.addEventListener(resizeEvt, recalc, false);

                // 把animate加入到jq
                $.fn.extend({
                    animateCss: function(animationName, callback) {
                        var animationEnd = (function(el) {
                            var animations = {
                                animation: 'animationend',
                                OAnimation: 'oAnimationEnd',
                                MozAnimation: 'mozAnimationEnd',
                                WebkitAnimation: 'webkitAnimationEnd',
                            };

                            for (var t in animations) {
                                if (el.style[t] !== undefined) {
                                    return animations[t];
                                }
                            }
                        })(document.createElement('div'));

                        this.addClass('animated ' + animationName).one(animationEnd, function() {
                            $(this).removeClass('animated ' + animationName);

                            if (typeof callback === 'function') callback($(this));
                        });

                        return this;
                    },
                });
                $('#dowebok').fullpage({
                    licenseKey: 'OPEN-SOURCE-GPLV3-LICENSE',
                    // sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
                    afterLoad: function(anchorLink, index) {
                        if (index.index == 3) {
                            var myChart = echarts.init(document.getElementById("chart3"))
                            var option = sun_chart()
                            myChart.setOption(option, true);
                            $('.section1-left-list li').css('opacity', '0');
                            $('.section1-right-list li').css('opacity', '0');
                            $('.section1-content').animateCss('rubberBand', function(ele) {});
                            rotationPlay('.section1-left-list li', 0, 'fadeInLeft', 300, function(ele) {
                                ele.css('opacity', '1');
                            });
                            rotationPlay('.section1-right-list li', 0, 'fadeInRight', 300, function(ele) {
                                ele.css('opacity', '1');
                            });

                        } else if (index.index == 0) {
                            var home_data = [
                                {name: "皂幕山", value: 1235504},
                                {name: "盈香生态园", value: 1169944},
                                {name: "美的鹭湖森林度假区", value: 1199996},
                                {name: "泰康山生态旅游区", value: 1210379}]

                            var myChart = echarts.init(document.getElementById("chart1"))
                            var option = generate_option(home_data)
                            myChart.setOption(option, true);
                            $('.section2-list1 li').css('opacity', '0');
                            $('.section2-list2 li').css('transform', 'perspective(400px) rotate3d(1, 0, 0, 90deg)');

                            rotationPlay('.section2-list1 li', 0, 'fadeInDown', 200, function(ele) {
                                ele.css('opacity', '1');
                            });
                            rotationPlay('.section2-list2 li', 0, 'flipInX', 200, function(ele) {
                                ele.css('transform', 'perspective(400px)');
                            });
                        } else if (index.index == 1) {
                            word()
                            $('.section3-left-list li').css('opacity', '0');
                            $('.section3-right-list li').css('opacity', '0');

                            rotationPlay('.section3-left-list li', 0, 'fadeInLeft', 300, function(ele) {
                                ele.css('opacity', '1');
                            });
                            rotationPlay('.section3-right-list li', 0, 'fadeInRight', 300, function(ele) {
                                ele.css('opacity', '1');
                            });
                        } else if (index.index == 2) {
                            var myChart = echarts.init(document.getElementById("chart4"))
                            var option = gdp()
                            myChart.setOption(option, true);
                            $('.section4-li').css('opacity', '0');

                            rotationPlay('.section4-li', 0, 'fadeInDown', 300, function(ele) {
                                ele.css('opacity', '1');
                            });
                        }
                        // } else if (index.index == 6) {
                        //     $('.section5-list1 li').css('opacity', '0');
                        //     $('.sections5-list2').css('opacity', '0');
                        //     $('.section5-arrow1').css('opacity', '0');
                        //     $('.section5-arrow2').css('opacity', '0');
                        //     $('.section5-roll').css('transform', 'scale(0,0) rotate(0deg)');

                        //     rotationPlay('.section5-list1 li', 0, 'fadeInLeft', 300, function(ele) {
                        //         ele.css('opacity', '1');
                        //     });
                        //     $('.section5-roll').animateCss('rollIn', function(ele) {
                        //         ele.css('transform', 'scale(1,1) rotate(360deg)');
                        //     });
                        //     setTimeout(function() {
                        //         $('.sections5-list2').animateCss('fadeInDown', function(ele) {
                        //             ele.css('opacity', '1');
                        //         });
                        //         $('.section5-arrow1').animateCss('fadeInDown', function(ele) {
                        //             ele.css('opacity', '1');
                        //         });
                        //         $('.section5-arrow2').animateCss('fadeInDown', function(ele) {
                        //             ele.css('opacity', '1');
                        //         });
                        //     }, 2400)
                        // } else if (index.index == 0) {
                        //     toggleOptions($('.section6-right'));
                        //     $('.section6-detail').css('opacity', '0');
                        //     $('.section6-detail').animateCss('fadeInDown', function(ele) {
                        //         ele.css('opacity', '1');
                        //     });
                        // } else if (index.index == 3) {
                        //     // $('.section7-page').css('opacity', '0');
                        //     // rotationPlay('.section7-page', 0, 'fadeInDown', 100, function(ele) {
                        //     //     ele.css('opacity', '1');
                        //     // });
                        // }
                    },
                    onLeave: function(index, direction) {
                        if (index.index == 3) {
                            rotationPlay('.section1-left-list li', 0, 'fadeOutLeft', 100, function(ele) {
                                ele.css('opacity', '0');
                            });
                            rotationPlay('.section1-right-list li', 0, 'fadeOutRight', 100, function(ele) {
                                ele.css('opacity', '0');
                            });
                            var myChart = echarts.init(document.getElementById("chart3"))
                            // var option = generate_option(home_data)
                            myChart.setOption({}, true);

                        } else if (index.index == 0) {
                            rotationPlay('.section2-list1 li', 0, 'fadeOutUp', 50, function(ele) {
                                ele.css('opacity', '0');
                            });
                            rotationPlay('.section2-list2 li', 0, 'flipOutX', 50, function(ele) {
                                ele.css('transform', 'perspective(400px) rotate3d(1, 0, 0, 90deg)');
                            });
                            var myChart = echarts.init(document.getElementById("chart1"))
                            // var option = generate_option(home_data)
                            myChart.setOption({}, true);
                        } else if (index.index == 1) {
                            rotationPlay('.section3-left-list li', 0, 'fadeOutLeft', 100, function(ele) {
                                ele.css('opacity', '0');
                            });
                            rotationPlay('.section3-right-list li', 0, 'fadeOutRight', 100, function(ele) {
                                ele.css('opacity', '0');
                            });

                        } else if (index.index == 2) {
                            rotationPlay('.section4-li', 0, 'fadeOutUp', 300, function(ele) {
                                ele.css('opacity', '0');
                            });
                            var myChart = echarts.init(document.getElementById("chart4"))
                            // var option = generate_option(home_data)
                            myChart.setOption({}, true);
                        // } else if (index.index == 5) {
                        //     $('.section5-list1 li').animateCss('fadeOutRight', function(ele) {
                        //         ele.css('opacity', '0');
                        //     });
                        //     $('.section5-roll').animateCss('rollOut', function(ele) {
                        //         ele.css('transform', 'scale(0,0) rotate(0deg)');
                        //     });
                        //     $('.sections5-list2').animateCss('fadeOut', function(ele) {
                        //         ele.css('opacity', '0');
                        //     });
                        //     $('.section5-arrow1').animateCss('fadeOut', function(ele) {
                        //         ele.css('opacity', '0');
                        //     });
                        //     $('.section5-arrow2').animateCss('fadeOut', function(ele) {
                        //         ele.css('opacity', '0');
                        //     });
                        // } else if (index.index == 0) {
                        //     toggleOptions($('.section6-right'));
                        //     $('.section6-detail').animateCss('fadeOutUp', function(ele) {
                        //         ele.css('opacity', '0');
                        //     });
                        // } else if (index.index == 3) {
                            // rotationPlay('.section7-page', 0, 'fadeOutUp', 100, function(ele) {
                            //     ele.css('opacity', '0');
                            // });
                        }
                    },
                    continuousVertical: true,
                });
                // 自动播放
                // setInterval(function(){
                //     $.fn.fullpage.moveSectionDown();
                // }, 5000);
            });
            // 轮流的播放动画
            function rotationPlay(name, i, animate, speat, callback) {
                if (speat === null) { speat = 300 }
                var t = null;
                return (function() {
                    if (!$(name).eq(i)) {
                        clearTimeout(t);
                        t = null;
                        return;
                    };
                    $(name).eq(i).animateCss(animate, function(that) {
                        if (typeof callback === 'function') callback(that);
                    });
                    t = setTimeout(function() {
                        i++;
                        rotationPlay(name, i, animate, speat, callback);
                    }, speat);
                })()
            }
            /**
             * note：初始化旋转展开按钮特效
             * author：zx
             * date：2018-11-17
             * modify：/
             */

            var angleStart = -300;

            function rotate(li, d) {
                $({ d: angleStart }).animate({ d: d }, {
                    step: function(now) {
                        $(li)
                            .css({ transform: 'rotate(' + now + 'deg)' })
                            .find('label')
                            .css({ transform: 'rotate(' + (-now) + 'deg)' });
                    },
                    duration: 0
                });
            }

            // show / hide the options
            // function toggleOptions(s) {
            //     $(s).toggleClass('open');
            //     var li = $(s).find('li');
            //     var deg = $(s).hasClass('half') ? 180 / (li.length - 1) : 360 / li.length;
            //     for (var i = 0; i < li.length; i++) {
            //         var d = $(s).hasClass('half') ? (i * deg) - 90 : i * deg;
            //         $(s).hasClass('open') ? rotate(li[i], d) : rotate(li[i], angleStart);
            //     }
            // }
            // $('.section7-page').on('click', function(event) {
            //     console.log($(event.currentTarget));
            //     showPage($(event.currentTarget))
            // })
            // 返回
            // $('.section7-back-btn').on('click', function(event) {
            //     $('.section7-page-show').hasClass('section7-page3') ? toggleOptions($('.section7-page3 .selector')) : '';
            //     $('.section7-back-btn').hide(300);
            //     $('.section7-page').removeClass('section7-page-show');
            // })
            // 三位一体点击放大
            // function showPage(ele) {
            //     if (!ele.hasClass('section7-page-show')) {
            //         ele.hasClass('section7-page3') ? toggleOptions($('.section7-page3 .selector')) : '';
            //         $('.section7-back-btn').show(300);
            //         ele.addClass('section7-page-show');
            //     }
            // }
            // ****************************************旋转转盘*********************************
            // 监听点击坐标
            // $('.section5-roll').on('click',function(event){
            //     let rollEle = $('.section5-roll-img');
            //     var centerX = rollEle.offset().left + rollEle.width() / 2;
            //     var centerY = rollEle.offset().top + rollEle.height() / 2;

            //     var x0 = centerX;
            //     var y0 = centerY;
            //     var x1 = event.clientX;
            //     var y1 = event.clientY;

            //     var tan = (x1-x0)/(y1-y0);
            //     var deg = 0;

            //     console.log('tan=' + tan);
            //     // if(x1>x0 && y1>=y0){
            //     //     deg = 180 - getDegByTan(tan);
            //     // }else if(x1>=x0 && y1<y0){
            //     //     deg = getDegByTan(-tan);
            //     // }else if(x1<x0 && y1<=y0){
            //     //     deg = 360 - getDegByTan(tan);
            //     // }else if(x1<=x0 && y1>y0){
            //     //     deg = 180 - getDegByTan(tan);
            //     // }
            //     if(y1>=y0){
            //         deg = 180 - getDegByTan(tan);
            //     }else if(x1>=x0 && y1<y0){
            //         deg = - getDegByTan(tan);
            //     }else if(x1<x0 && y1<=y0){
            //         deg = 360 - getDegByTan(tan);
            //     }
            //     // 获取已旋转的角度
            //     var eleTransform = $('.section5-roll').css('transform').split('matrix(')[1].split(')')[0].split(',');
            //     var eleDeg = getmatrix(eleTransform[0],eleTransform[1],eleTransform[2],eleTransform[3]);

            //     // 点击的位置
            //     var clickDeg = (deg - eleDeg)%360 > 0 ? (deg - eleDeg)%360 : 360 + (deg - eleDeg)%360;

            //     // 判断点了哪块的
            //     if(0 < clickDeg && clickDeg <= 60){
            //         $('.section5-roll').css('transform','scale(1, 1) rotate(-'+30+'deg)')
            //     }else if(60 < clickDeg && clickDeg <= 120){
            //         $('.section5-roll').css('transform','scale(1, 1) rotate(-'+90+'deg)')
            //     }else if(120 < clickDeg && clickDeg <= 210){
            //         $('.section5-roll').css('transform','scale(1, 1) rotate(-'+165+'deg)')
            //     }else if(210 < clickDeg && clickDeg <= 270){
            //         $('.section5-roll').css('transform','scale(1, 1) rotate(-'+240+'deg)')
            //     }else if(270 < clickDeg && clickDeg <= 360){
            //         $('.section5-roll').css('transform','scale(1, 1) rotate(-'+315+'deg)')
            //     }

            //     console.log(deg);
            // })
            function getDegByTan(tan){
                return Math.atan(tan) * 180 / Math.PI
            }
            function getmatrix(a,b,c,d){ 
                var aa=Math.round(180*Math.asin(a)/ Math.PI); 
                var bb=Math.round(180*Math.acos(b)/ Math.PI); 
                var cc=Math.round(180*Math.asin(c)/ Math.PI); 
                var dd=Math.round(180*Math.acos(d)/ Math.PI); 
                var deg=0; 
                if(aa==bb||-aa==bb){ 
                    deg=dd; 
                }else if(-aa+bb==180){ 
                    deg=180+cc; 
                }else if(aa+bb==180){ 
                    deg=360-cc||360-dd; 
                } 
                return deg>=360?0:deg; 
            }

            function generate_option(scaleData){

                var rich = {
                    white: {
                        color: '#ddd',
                        align: 'center',
                        padding: [3, 0]
                    }
                };
                var placeHolderStyle = {
                    normal: {
                        label: {
                            show: false
                        },
                        labelLine: {
                            show: false
                        },
                        color: 'rgba(0, 0, 0, 0)',
                        borderColor: 'rgba(0, 0, 0, 0)',
                        borderWidth: 0
                    }
                };
                var data = [];
                var color=['#00ffff','#00cfff','#006ced','#ffe000','#ffa800','#ff5b00','#ff3000']
                for (var i = 0; i < scaleData.length; i++) {
                    data.push({
                        value: scaleData[i].value,
                        name: scaleData[i].name,
                        itemStyle: {
                            normal: {
                                borderWidth: 5,
                                shadowBlur: 20,
                                borderColor:color[i],
                                shadowColor: color[i]
                            }
                        }
                    }, {
                        value: 2,
                        name: '',
                        itemStyle: placeHolderStyle
                    });
                }
                var seriesObj = [{
                    name: '',
                    type: 'pie',
                    clockWise: false,
                    radius: [175, 180],
                    hoverAnimation: false,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true,
                                position: 'outside',
                                color: '#ddd',
                                formatter: function(params) {
                                    var percent = 0;
                                    var total = 0;
                                    for (var i = 0; i < scaleData.length; i++) {
                                        total += scaleData[i].value;
                                    }
                                    percent = ((params.value / total) * 100).toFixed(0);
                                    if(params.name !== '') {
                                        return params.name + '\n{white|' + '占比' + percent + '%}';
                                    }else {
                                        return '';
                                    }
                                },
                                rich: rich
                            },
                            labelLine: {
                                length:30,
                                length2:100,
                                show: true,
                                color:'#00ffff'
                            }
                        }
                    },
                    data: data
                }];
                option = {
                    backgroundColor: '#04243E',
                    tooltip: {
                        show: false
                    },
                    legend: {
                        show: false
                    },
                    toolbox: {
                        show: false
                    },
                    series: seriesObj
                }
                return option
            }

            function word(){
                var wordFreqs = [{Key: "企业",Value: 60},
                    {Key: "文化",Value: 50},
                    {Key: "博物馆",Value: 46},
                    {Key: "市民",Value: 45},
                    {Key: "城市",Value: 28},
                    {Key: "服务",Value: 22},
                    {Key: "群众",Value: 21},
                    {Key: "环境",Value: 19},
                    {Key: "提升",Value: 19},
                    {Key: "http",Value: 18}]
                var wordFreqData = new Array();
                for (var i = 0; i < wordFreqs.length; i++) {
                    var option = [wordFreqs[i].Key, wordFreqs[i].Value];
                    wordFreqData.push(option);
                }
                var canvas = document.getElementById('chart2');
                var options = eval({
                        "list": wordFreqData,//或者[['各位观众',45],['词云', 21],['来啦!!!',13]],只要格式满足这样都可以
                        "gridSize": 6, // 密集程度 数字越小越密集
                        "weightFactor": 1, // 字体大小=原始大小*weightFactor
                        "maxFontSize": 15, //最大字号
                        "minFontSize": 5, //最小字号
                        "fontWeight": 'normal', //字体粗细
                        "fontFamily": 'Times, serif', // 字体
                        "color": 'random-light', // 字体颜色 'random-dark' 或者 'random-light'
                        "backgroundColor": 'rgba(255,255,255,1)', // 背景颜色
                        "rotateRatio": 0 // 字体倾斜(旋转)概率，1代表总是倾斜(旋转)
                    });
                //生成
                WordCloud(canvas, options);
            }

                function sun_chart(){
                    var colors = ['#FFAE57', '#FF7853', '#EA5151', '#CC3F57', '#9A2555'];
                    var bgColor = '#2E2733';

                    var itemStyle = {
                        star5: {
                            color: colors[0]
                        },
                        star4: {
                            color: colors[1]
                        },
                        star3: {
                            color: colors[2]
                        },
                        star2: {
                            color: colors[3]
                        }
                    };

                    var data = [{
                        name: '虚构',
                        itemStyle: {
                            color: colors[1]
                        },
                        children: [{
                            name: '小说',
                            children: [{
                                name: '5☆',
                                children: [{
                                    name: '疼'
                                }, {
                                    name: '慈悲'
                                }, {
                                    name: '楼下的房客'
                                }]
                            }, {
                                name: '4☆',
                                children: [{
                                    name: '虚无的十字架'
                                }, {
                                    name: '无声告白'
                                }, {
                                    name: '童年的终结'
                                }]
                            }, {
                                name: '3☆',
                                children: [{
                                    name: '疯癫老人日记'
                                }]
                            }]
                        }, {
                            name: '其他',
                            children: [{
                                name: '5☆',
                                children: [{
                                    name: '纳博科夫短篇小说全集'
                                }]
                            }, {
                                name: '4☆',
                                children: [{
                                    name: '安魂曲'
                                }, {
                                    name: '人生拼图版'
                                }]
                            }, {
                                name: '3☆',
                                children: [{
                                    name: '比起爱你，我更需要你'
                                }]
                            }]
                        }]
                    }, {
                        name: '非虚构',
                        itemStyle: {
                            color: colors[2]
                        },
                        children: [{
                            name: '设计',
                            children: [{
                                name: '5☆',
                                children: [{
                                    name: '无界面交互'
                                }]
                            }, {
                                name: '4☆',
                                children: [{
                                    name: '数字绘图的光照与渲染技术'
                                }, {
                                    name: '日本建筑解剖书'
                                }]
                            }, {
                                name: '3☆',
                                children: [{
                                    name: '奇幻世界艺术\n&RPG地图绘制讲座'
                                }]
                            }]
                        }, {
                            name: '社科',
                            children: [{
                                name: '5☆',
                                children: [{
                                    name: '痛点'
                                }]
                            }, {
                                name: '4☆',
                                children: [{
                                    name: '卓有成效的管理者'
                                }, {
                                    name: '进化'
                                }, {
                                    name: '后物欲时代的来临',
                                }]
                            }, {
                                name: '3☆',
                                children: [{
                                    name: '疯癫与文明'
                                }]
                            }]
                        }, {
                            name: '心理',
                            children: [{
                                name: '5☆',
                                children: [{
                                    name: '我们时代的神经症人格'
                                }]
                            }, {
                                name: '4☆',
                                children: [{
                                    name: '皮格马利翁效应'
                                }, {
                                    name: '受伤的人'
                                }]
                            }, {
                                name: '3☆',
                            }, {
                                name: '2☆',
                                children: [{
                                    name: '迷恋'
                                }]
                            }]
                        }, {
                            name: '居家',
                            children: [{
                                name: '4☆',
                                children: [{
                                    name: '把房子住成家'
                                }, {
                                    name: '只过必要生活'
                                }, {
                                    name: '北欧简约风格'
                                }]
                            }]
                        }, {
                            name: '绘本',
                            children: [{
                                name: '5☆',
                                children: [{
                                    name: '设计诗'
                                }]
                            }, {
                                name: '4☆',
                                children: [{
                                    name: '假如生活糊弄了你'
                                }, {
                                    name: '博物学家的神秘动物图鉴'
                                }]
                            }, {
                                name: '3☆',
                                children: [{
                                    name: '方向'
                                }]
                            }]
                        }, {
                            name: '哲学',
                            children: [{
                                name: '4☆',
                                children: [{
                                    name: '人生的智慧'
                                }]
                            }]
                        }, {
                            name: '技术',
                            children: [{
                                name: '5☆',
                                children: [{
                                    name: '代码整洁之道'
                                }]
                            }, {
                                name: '4☆',
                                children: [{
                                    name: 'Three.js 开发指南'
                                }]
                            }]
                        }]
                    }];

                    for (var j = 0; j < data.length; ++j) {
                        var level1 = data[j].children;
                        for (var i = 0; i < level1.length; ++i) {
                            var block = level1[i].children;
                            var bookScore = [];
                            var bookScoreId;
                            for (var star = 0; star < block.length; ++star) {
                                var style = (function (name) {
                                    switch (name) {
                                        case '5☆':
                                            bookScoreId = 0;
                                            return itemStyle.star5;
                                        case '4☆':
                                            bookScoreId = 1;
                                            return itemStyle.star4;
                                        case '3☆':
                                            bookScoreId = 2;
                                            return itemStyle.star3;
                                        case '2☆':
                                            bookScoreId = 3;
                                            return itemStyle.star2;
                                    }
                                })(block[star].name);

                                block[star].label = {
                                    color: style.color,
                                    downplay: {
                                        opacity: 0.5
                                    }
                                };

                                if (block[star].children) {
                                    style = {
                                        opacity: 1,
                                        color: style.color
                                    };
                                    block[star].children.forEach(function (book) {
                                        book.value = 1;
                                        book.itemStyle = style;

                                        book.label = {
                                            color: style.color
                                        };

                                        var value = 1;
                                        if (bookScoreId === 0 || bookScoreId === 3) {
                                            value = 5;
                                        }

                                        if (bookScore[bookScoreId]) {
                                            bookScore[bookScoreId].value += value;
                                        }
                                        else {
                                            bookScore[bookScoreId] = {
                                                color: colors[bookScoreId],
                                                value: value
                                            };
                                        }
                                    });
                                }
                            }

                            level1[i].itemStyle = {
                                color: data[j].itemStyle.color
                            };
                        }
                    }

                    option = {
                        backgroundColor: bgColor,
                        color: colors,
                        series: [{
                            type: 'sunburst',
                            center: ['50%', '48%'],
                            data: data,
                            sort: function (a, b) {
                                if (a.depth === 1) {
                                    return b.getValue() - a.getValue();
                                }
                                else {
                                    return a.dataIndex - b.dataIndex;
                                }
                            },
                            label: {
                                rotate: 'radial',
                                color: bgColor
                            },
                            itemStyle: {
                                borderColor: bgColor,
                                borderWidth: 2
                            },
                            levels: [{}, {
                                r0: 0,
                                r: 40,
                                label: {
                                    rotate: 0
                                }
                            }, {
                                r0: 40,
                                r: 105
                            }, {
                                r0: 115,
                                r: 140,
                                itemStyle: {
                                    shadowBlur: 2,
                                    shadowColor: colors[2],
                                    color: 'transparent'
                                },
                                label: {
                                    rotate: 'tangential',
                                    fontSize: 10,
                                    color: colors[0]
                                }
                            }, {
                                r0: 140,
                                r: 145,
                                itemStyle: {
                                    shadowBlur: 80,
                                    shadowColor: colors[0]
                                },
                                label: {
                                    position: 'outside',
                                    textShadowBlur: 5,
                                    textShadowColor: '#333',
                                },
                                downplay: {
                                    label: {
                                        opacity: 0.5
                                    }
                                }
                            }]
                        }]
                    };

                    return option
                }

            </script>
</body>

<!-- function getmatrix(a,b,c,d){ 
    var aa=Math.round(180*Math.asin(a)/ Math.PI); 
    var bb=Math.round(180*Math.acos(b)/ Math.PI); 
    var cc=Math.round(180*Math.asin(c)/ Math.PI); 
    var dd=Math.round(180*Math.acos(d)/ Math.PI); 
    var deg=0; 
    if(aa==bb||-aa==bb){ 
        deg=dd; 
    }else if(-aa+bb==180){ 
        deg=180+cc; 
    }else if(aa+bb==180){ 
        deg=360-cc||360-dd; 
    } 
    return deg>=360?0:deg; 
}
 -->